{% extends "billing/layout.html" %}
{% block title %}
    Last 30 days
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>最近30天</h1>
</div>

{% if sub_list %}
<form class="form-horizontal">
    <fieldset>
        <legend>按订阅筛选</legend>
        <div class="form-group">
            <label for="select_sub" class="col-md-2 control-label">选择订阅</label>
            <div class="col-md-5">
                <select name="sub_list" class="form-control" onchange="fetchData(this.options[selectedIndex].value)">
                    <option value="" >全部</option>
                    {% for sub in sub_list %}
                        <option value="{{ sub.id }}">{{ sub.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </fieldset>
</form>
{% endif %}

<div id="bar" style="width:1000px; height:600px;"></div>
{% endblock %}

{% load static %}
{% block script %}
<script type="text/javascript" src="{% static 'echarts/themes/essos.js' %}"></script>
<script>
    var chart = echarts.init(document.getElementById('bar'), 'essos', {renderer: 'canvas'});

    $(function () {
        fetchData();
    });

    function fetchData(subid) {
        $.ajax({
            type: "GET",
            url: "{% url 'billing:cost_last30days' %}",
            dataType: 'json',
            data: {'subid': subid},
            success: function (result) {
                chart.clear();
                chart.setOption(result.data);
            }
        });
    }
</script>
{% endblock %}
